<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3877712" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon fi">&#xeca2;</span>
                <div class="name">爱心 _实心</div>
                <div class="code-name">&amp;#xeca2;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe84d;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe84d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xeca1;</span>
                <div class="name">爱心</div>
                <div class="code-name">&amp;#xeca1;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe6cb;</span>
                <div class="name">KHCFDC_电话</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe680;</span>
                <div class="name">多语言</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe958;</span>
                <div class="name">基站信号,信号塔,发射信号</div>
                <div class="code-name">&amp;#xe958;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xebcb;</span>
                <div class="name">基站信号,信号塔,发射信号-copy</div>
                <div class="code-name">&amp;#xebcb;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe6e4;</span>
                <div class="name">符号-国际化</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe60d;</span>
                <div class="name">空状态</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe633;</span>
                <div class="name">数字50</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe605;</span>
                <div class="name">数字10</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe606;</span>
                <div class="name">数字15</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe624;</span>
                <div class="name">数字20</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe628;</span>
                <div class="name">数字30</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe603;</span>
                <div class="name">专利</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe644;</span>
                <div class="name">科研方向</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe622;</span>
                <div class="name">视频</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe898;</span>
                <div class="name">22资料、手册</div>
                <div class="code-name">&amp;#xe898;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe625;</span>
                <div class="name">文章</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe60f;</span>
                <div class="name">卫星</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe63c;</span>
                <div class="name">通信</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe766;</span>
                <div class="name">企业指标</div>
                <div class="code-name">&amp;#xe766;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe6a3;</span>
                <div class="name">服务监控</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xebca;</span>
                <div class="name">Hardware-Mac-@1x-Line</div>
                <div class="code-name">&amp;#xebca;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe66f;</span>
                <div class="name">汽车电子</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xebcc;</span>
                <div class="name">卫星</div>
                <div class="code-name">&amp;#xebcc;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xebcd;</span>
                <div class="name">Hardware-Mac-@1x-Line</div>
                <div class="code-name">&amp;#xebcd;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xebce;</span>
                <div class="name">汽车电子</div>
                <div class="code-name">&amp;#xebce;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe760;</span>
                <div class="name">工具箱_1</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe600;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe655;</span>
                <div class="name">留言</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe6b4;</span>
                <div class="name">芯片</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe604;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe602;</span>
                <div class="name">地址</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe623;</span>
                <div class="name">下载盘点单、下载打印模板</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe634;</span>
                <div class="name">上箭头</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe60c;</span>
                <div class="name">下箭头</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe601;</span>
                <div class="name">shipin</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe736;</span>
                <div class="name">enligsh</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe735;</span>
                <div class="name">qq</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe734;</span>
                <div class="name">location-border</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe72b;</span>
                <div class="name">video</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe732;</span>
                <div class="name">note</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe733;</span>
                <div class="name">bag</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe730;</span>
                <div class="name">certificate</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe731;</span>
                <div class="name">awards</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe72f;</span>
                <div class="name">tel-circle</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe72e;</span>
                <div class="name">menus</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe72d;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe726;</span>
                <div class="name">manual</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe727;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe728;</span>
                <div class="name">pdf</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe729;</span>
                <div class="name">code</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe72a;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe72c;</span>
                <div class="name">sign</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe716;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe717;</span>
                <div class="name">map</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe718;</span>
                <div class="name">flag</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe71a;</span>
                <div class="name">menu</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe71b;</span>
                <div class="name">warn</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe71c;</span>
                <div class="name">detector</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe71d;</span>
                <div class="name">email</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe71e;</span>
                <div class="name">company-square</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe71f;</span>
                <div class="name">internet</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe720;</span>
                <div class="name">mobile</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe721;</span>
                <div class="name">dialog</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe722;</span>
                <div class="name">qq</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe723;</span>
                <div class="name">calendar</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe724;</span>
                <div class="name">wechat</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe725;</span>
                <div class="name">telphone</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe714;</span>
                <div class="name">briefcase</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe715;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe70d;</span>
                <div class="name">location</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe70e;</span>
                <div class="name">telphone-fill</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe70f;</span>
                <div class="name">box</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe710;</span>
                <div class="name">company</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe711;</span>
                <div class="name">line</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe712;</span>
                <div class="name">user-group</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe713;</span>
                <div class="name">earphone</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe70c;</span>
                <div class="name">member</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fi">&#xe70b;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'fi';
  src: url('iconfont.woff?t=1717561390653') format('woff'),
       url('iconfont.svg?t=1717561390653#fi') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.fi {
  font-family: "fi" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="fi"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"fi" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon fi fi-aixin_shixin"></span>
            <div class="name">
              爱心 _实心
            </div>
            <div class="code-name">.fi-aixin_shixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.fi-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-aixin"></span>
            <div class="name">
              爱心
            </div>
            <div class="code-name">.fi-aixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-dianhua"></span>
            <div class="name">
              KHCFDC_电话
            </div>
            <div class="code-name">.fi-dianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-duoyuyan"></span>
            <div class="name">
              多语言
            </div>
            <div class="code-name">.fi-duoyuyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-base-signal-full"></span>
            <div class="name">
              基站信号,信号塔,发射信号
            </div>
            <div class="code-name">.fi-base-signal-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-base-signal-full-copy"></span>
            <div class="name">
              基站信号,信号塔,发射信号-copy
            </div>
            <div class="code-name">.fi-base-signal-full-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-guojihua"></span>
            <div class="name">
              符号-国际化
            </div>
            <div class="code-name">.fi-guojihua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-kongzhuangtai"></span>
            <div class="name">
              空状态
            </div>
            <div class="code-name">.fi-kongzhuangtai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-shuzi50"></span>
            <div class="name">
              数字50
            </div>
            <div class="code-name">.fi-shuzi50
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-shuzi10"></span>
            <div class="name">
              数字10
            </div>
            <div class="code-name">.fi-shuzi10
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-shuzi15"></span>
            <div class="name">
              数字15
            </div>
            <div class="code-name">.fi-shuzi15
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-shuzi20"></span>
            <div class="name">
              数字20
            </div>
            <div class="code-name">.fi-shuzi20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-shuzi30"></span>
            <div class="name">
              数字30
            </div>
            <div class="code-name">.fi-shuzi30
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-zhuanli"></span>
            <div class="name">
              专利
            </div>
            <div class="code-name">.fi-zhuanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-keyanfangxiang"></span>
            <div class="name">
              科研方向
            </div>
            <div class="code-name">.fi-keyanfangxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-shipin"></span>
            <div class="name">
              视频
            </div>
            <div class="code-name">.fi-shipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-ziliaoshouce"></span>
            <div class="name">
              22资料、手册
            </div>
            <div class="code-name">.fi-ziliaoshouce
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-16"></span>
            <div class="name">
              文章
            </div>
            <div class="code-name">.fi-16
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-weixing"></span>
            <div class="name">
              卫星
            </div>
            <div class="code-name">.fi-weixing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-tongxin"></span>
            <div class="name">
              通信
            </div>
            <div class="code-name">.fi-tongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-qiyezhibiao"></span>
            <div class="name">
              企业指标
            </div>
            <div class="code-name">.fi-qiyezhibiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-fuwujiankong"></span>
            <div class="name">
              服务监控
            </div>
            <div class="code-name">.fi-fuwujiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-a-Hardware-Mac-1x-Line"></span>
            <div class="name">
              Hardware-Mac-@1x-Line
            </div>
            <div class="code-name">.fi-a-Hardware-Mac-1x-Line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-os-qichedz"></span>
            <div class="name">
              汽车电子
            </div>
            <div class="code-name">.fi-os-qichedz
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-weixing-copy"></span>
            <div class="name">
              卫星
            </div>
            <div class="code-name">.fi-weixing-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-a-Hardware-Mac-1x-Line-copy"></span>
            <div class="name">
              Hardware-Mac-@1x-Line
            </div>
            <div class="code-name">.fi-a-Hardware-Mac-1x-Line-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-os-qichedz-copy"></span>
            <div class="name">
              汽车电子
            </div>
            <div class="code-name">.fi-os-qichedz-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-gongjuxiang_1"></span>
            <div class="name">
              工具箱_1
            </div>
            <div class="code-name">.fi-gongjuxiang_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.fi-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-liuyan"></span>
            <div class="name">
              留言
            </div>
            <div class="code-name">.fi-liuyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-cpu-line"></span>
            <div class="name">
              芯片
            </div>
            <div class="code-name">.fi-cpu-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-youxiang"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.fi-youxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-dizhi"></span>
            <div class="name">
              地址
            </div>
            <div class="code-name">.fi-dizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-cangpeitubiao_xiazaipandiandanxiazaidayinmoban"></span>
            <div class="name">
              下载盘点单、下载打印模板
            </div>
            <div class="code-name">.fi-cangpeitubiao_xiazaipandiandanxiazaidayinmoban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-shangjiantou"></span>
            <div class="name">
              上箭头
            </div>
            <div class="code-name">.fi-shangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-xiajiantou"></span>
            <div class="name">
              下箭头
            </div>
            <div class="code-name">.fi-xiajiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-a-shipin1"></span>
            <div class="name">
              shipin
            </div>
            <div class="code-name">.fi-a-shipin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-enligsh"></span>
            <div class="name">
              enligsh
            </div>
            <div class="code-name">.fi-enligsh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-qq1"></span>
            <div class="name">
              qq
            </div>
            <div class="code-name">.fi-qq1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-location-border"></span>
            <div class="name">
              location-border
            </div>
            <div class="code-name">.fi-location-border
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-video"></span>
            <div class="name">
              video
            </div>
            <div class="code-name">.fi-video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-note"></span>
            <div class="name">
              note
            </div>
            <div class="code-name">.fi-note
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-bag"></span>
            <div class="name">
              bag
            </div>
            <div class="code-name">.fi-bag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-certificate"></span>
            <div class="name">
              certificate
            </div>
            <div class="code-name">.fi-certificate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-awards"></span>
            <div class="name">
              awards
            </div>
            <div class="code-name">.fi-awards
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-tel-circle"></span>
            <div class="name">
              tel-circle
            </div>
            <div class="code-name">.fi-tel-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-menus"></span>
            <div class="name">
              menus
            </div>
            <div class="code-name">.fi-menus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.fi-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-manual"></span>
            <div class="name">
              manual
            </div>
            <div class="code-name">.fi-manual
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.fi-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-pdf"></span>
            <div class="name">
              pdf
            </div>
            <div class="code-name">.fi-pdf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-code"></span>
            <div class="name">
              code
            </div>
            <div class="code-name">.fi-code
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-list"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.fi-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-sign"></span>
            <div class="name">
              sign
            </div>
            <div class="code-name">.fi-sign
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.fi-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-map"></span>
            <div class="name">
              map
            </div>
            <div class="code-name">.fi-map
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-flag"></span>
            <div class="name">
              flag
            </div>
            <div class="code-name">.fi-flag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-menu"></span>
            <div class="name">
              menu
            </div>
            <div class="code-name">.fi-menu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-warn"></span>
            <div class="name">
              warn
            </div>
            <div class="code-name">.fi-warn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-detector"></span>
            <div class="name">
              detector
            </div>
            <div class="code-name">.fi-detector
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-email"></span>
            <div class="name">
              email
            </div>
            <div class="code-name">.fi-email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-company-square"></span>
            <div class="name">
              company-square
            </div>
            <div class="code-name">.fi-company-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-internet"></span>
            <div class="name">
              internet
            </div>
            <div class="code-name">.fi-internet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-mobile"></span>
            <div class="name">
              mobile
            </div>
            <div class="code-name">.fi-mobile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-dialog"></span>
            <div class="name">
              dialog
            </div>
            <div class="code-name">.fi-dialog
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-qq"></span>
            <div class="name">
              qq
            </div>
            <div class="code-name">.fi-qq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-calendar"></span>
            <div class="name">
              calendar
            </div>
            <div class="code-name">.fi-calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-wechat"></span>
            <div class="name">
              wechat
            </div>
            <div class="code-name">.fi-wechat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-telphone"></span>
            <div class="name">
              telphone
            </div>
            <div class="code-name">.fi-telphone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-briefcase"></span>
            <div class="name">
              briefcase
            </div>
            <div class="code-name">.fi-briefcase
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-setting"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.fi-setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-location"></span>
            <div class="name">
              location
            </div>
            <div class="code-name">.fi-location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-telphone-fill"></span>
            <div class="name">
              telphone-fill
            </div>
            <div class="code-name">.fi-telphone-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-box"></span>
            <div class="name">
              box
            </div>
            <div class="code-name">.fi-box
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-company"></span>
            <div class="name">
              company
            </div>
            <div class="code-name">.fi-company
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-line"></span>
            <div class="name">
              line
            </div>
            <div class="code-name">.fi-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-user-group"></span>
            <div class="name">
              user-group
            </div>
            <div class="code-name">.fi-user-group
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-earphone"></span>
            <div class="name">
              earphone
            </div>
            <div class="code-name">.fi-earphone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-member"></span>
            <div class="name">
              member
            </div>
            <div class="code-name">.fi-member
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fi fi-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.fi-search
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="fi fi-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            fi" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-aixin_shixin"></use>
                </svg>
                <div class="name">爱心 _实心</div>
                <div class="code-name">#fi-aixin_shixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#fi-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-aixin"></use>
                </svg>
                <div class="name">爱心</div>
                <div class="code-name">#fi-aixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-dianhua"></use>
                </svg>
                <div class="name">KHCFDC_电话</div>
                <div class="code-name">#fi-dianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-duoyuyan"></use>
                </svg>
                <div class="name">多语言</div>
                <div class="code-name">#fi-duoyuyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-base-signal-full"></use>
                </svg>
                <div class="name">基站信号,信号塔,发射信号</div>
                <div class="code-name">#fi-base-signal-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-base-signal-full-copy"></use>
                </svg>
                <div class="name">基站信号,信号塔,发射信号-copy</div>
                <div class="code-name">#fi-base-signal-full-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-guojihua"></use>
                </svg>
                <div class="name">符号-国际化</div>
                <div class="code-name">#fi-guojihua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-kongzhuangtai"></use>
                </svg>
                <div class="name">空状态</div>
                <div class="code-name">#fi-kongzhuangtai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-shuzi50"></use>
                </svg>
                <div class="name">数字50</div>
                <div class="code-name">#fi-shuzi50</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-shuzi10"></use>
                </svg>
                <div class="name">数字10</div>
                <div class="code-name">#fi-shuzi10</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-shuzi15"></use>
                </svg>
                <div class="name">数字15</div>
                <div class="code-name">#fi-shuzi15</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-shuzi20"></use>
                </svg>
                <div class="name">数字20</div>
                <div class="code-name">#fi-shuzi20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-shuzi30"></use>
                </svg>
                <div class="name">数字30</div>
                <div class="code-name">#fi-shuzi30</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-zhuanli"></use>
                </svg>
                <div class="name">专利</div>
                <div class="code-name">#fi-zhuanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-keyanfangxiang"></use>
                </svg>
                <div class="name">科研方向</div>
                <div class="code-name">#fi-keyanfangxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-shipin"></use>
                </svg>
                <div class="name">视频</div>
                <div class="code-name">#fi-shipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-ziliaoshouce"></use>
                </svg>
                <div class="name">22资料、手册</div>
                <div class="code-name">#fi-ziliaoshouce</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-16"></use>
                </svg>
                <div class="name">文章</div>
                <div class="code-name">#fi-16</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-weixing"></use>
                </svg>
                <div class="name">卫星</div>
                <div class="code-name">#fi-weixing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-tongxin"></use>
                </svg>
                <div class="name">通信</div>
                <div class="code-name">#fi-tongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-qiyezhibiao"></use>
                </svg>
                <div class="name">企业指标</div>
                <div class="code-name">#fi-qiyezhibiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-fuwujiankong"></use>
                </svg>
                <div class="name">服务监控</div>
                <div class="code-name">#fi-fuwujiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-a-Hardware-Mac-1x-Line"></use>
                </svg>
                <div class="name">Hardware-Mac-@1x-Line</div>
                <div class="code-name">#fi-a-Hardware-Mac-1x-Line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-os-qichedz"></use>
                </svg>
                <div class="name">汽车电子</div>
                <div class="code-name">#fi-os-qichedz</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-weixing-copy"></use>
                </svg>
                <div class="name">卫星</div>
                <div class="code-name">#fi-weixing-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-a-Hardware-Mac-1x-Line-copy"></use>
                </svg>
                <div class="name">Hardware-Mac-@1x-Line</div>
                <div class="code-name">#fi-a-Hardware-Mac-1x-Line-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-os-qichedz-copy"></use>
                </svg>
                <div class="name">汽车电子</div>
                <div class="code-name">#fi-os-qichedz-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-gongjuxiang_1"></use>
                </svg>
                <div class="name">工具箱_1</div>
                <div class="code-name">#fi-gongjuxiang_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#fi-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-liuyan"></use>
                </svg>
                <div class="name">留言</div>
                <div class="code-name">#fi-liuyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-cpu-line"></use>
                </svg>
                <div class="name">芯片</div>
                <div class="code-name">#fi-cpu-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-youxiang"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#fi-youxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-dizhi"></use>
                </svg>
                <div class="name">地址</div>
                <div class="code-name">#fi-dizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-cangpeitubiao_xiazaipandiandanxiazaidayinmoban"></use>
                </svg>
                <div class="name">下载盘点单、下载打印模板</div>
                <div class="code-name">#fi-cangpeitubiao_xiazaipandiandanxiazaidayinmoban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-shangjiantou"></use>
                </svg>
                <div class="name">上箭头</div>
                <div class="code-name">#fi-shangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-xiajiantou"></use>
                </svg>
                <div class="name">下箭头</div>
                <div class="code-name">#fi-xiajiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-a-shipin1"></use>
                </svg>
                <div class="name">shipin</div>
                <div class="code-name">#fi-a-shipin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-enligsh"></use>
                </svg>
                <div class="name">enligsh</div>
                <div class="code-name">#fi-enligsh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-qq1"></use>
                </svg>
                <div class="name">qq</div>
                <div class="code-name">#fi-qq1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-location-border"></use>
                </svg>
                <div class="name">location-border</div>
                <div class="code-name">#fi-location-border</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-video"></use>
                </svg>
                <div class="name">video</div>
                <div class="code-name">#fi-video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-note"></use>
                </svg>
                <div class="name">note</div>
                <div class="code-name">#fi-note</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-bag"></use>
                </svg>
                <div class="name">bag</div>
                <div class="code-name">#fi-bag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-certificate"></use>
                </svg>
                <div class="name">certificate</div>
                <div class="code-name">#fi-certificate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-awards"></use>
                </svg>
                <div class="name">awards</div>
                <div class="code-name">#fi-awards</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-tel-circle"></use>
                </svg>
                <div class="name">tel-circle</div>
                <div class="code-name">#fi-tel-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-menus"></use>
                </svg>
                <div class="name">menus</div>
                <div class="code-name">#fi-menus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#fi-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-manual"></use>
                </svg>
                <div class="name">manual</div>
                <div class="code-name">#fi-manual</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#fi-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-pdf"></use>
                </svg>
                <div class="name">pdf</div>
                <div class="code-name">#fi-pdf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-code"></use>
                </svg>
                <div class="name">code</div>
                <div class="code-name">#fi-code</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-list"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#fi-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-sign"></use>
                </svg>
                <div class="name">sign</div>
                <div class="code-name">#fi-sign</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#fi-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-map"></use>
                </svg>
                <div class="name">map</div>
                <div class="code-name">#fi-map</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-flag"></use>
                </svg>
                <div class="name">flag</div>
                <div class="code-name">#fi-flag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-menu"></use>
                </svg>
                <div class="name">menu</div>
                <div class="code-name">#fi-menu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-warn"></use>
                </svg>
                <div class="name">warn</div>
                <div class="code-name">#fi-warn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-detector"></use>
                </svg>
                <div class="name">detector</div>
                <div class="code-name">#fi-detector</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-email"></use>
                </svg>
                <div class="name">email</div>
                <div class="code-name">#fi-email</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-company-square"></use>
                </svg>
                <div class="name">company-square</div>
                <div class="code-name">#fi-company-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-internet"></use>
                </svg>
                <div class="name">internet</div>
                <div class="code-name">#fi-internet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-mobile"></use>
                </svg>
                <div class="name">mobile</div>
                <div class="code-name">#fi-mobile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-dialog"></use>
                </svg>
                <div class="name">dialog</div>
                <div class="code-name">#fi-dialog</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-qq"></use>
                </svg>
                <div class="name">qq</div>
                <div class="code-name">#fi-qq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-calendar"></use>
                </svg>
                <div class="name">calendar</div>
                <div class="code-name">#fi-calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-wechat"></use>
                </svg>
                <div class="name">wechat</div>
                <div class="code-name">#fi-wechat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-telphone"></use>
                </svg>
                <div class="name">telphone</div>
                <div class="code-name">#fi-telphone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-briefcase"></use>
                </svg>
                <div class="name">briefcase</div>
                <div class="code-name">#fi-briefcase</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-setting"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#fi-setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-location"></use>
                </svg>
                <div class="name">location</div>
                <div class="code-name">#fi-location</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-telphone-fill"></use>
                </svg>
                <div class="name">telphone-fill</div>
                <div class="code-name">#fi-telphone-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-box"></use>
                </svg>
                <div class="name">box</div>
                <div class="code-name">#fi-box</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-company"></use>
                </svg>
                <div class="name">company</div>
                <div class="code-name">#fi-company</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-line"></use>
                </svg>
                <div class="name">line</div>
                <div class="code-name">#fi-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-user-group"></use>
                </svg>
                <div class="name">user-group</div>
                <div class="code-name">#fi-user-group</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-earphone"></use>
                </svg>
                <div class="name">earphone</div>
                <div class="code-name">#fi-earphone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-member"></use>
                </svg>
                <div class="name">member</div>
                <div class="code-name">#fi-member</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fi-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#fi-search</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
